import React, { Component } from 'react'
// 从react-router-dom中引入需要的组件
import { Route, Switch } from 'react-router-dom'
// 引入需要显示的组件
// import ComA from './components/ComA'
// import ComB from './components/ComB'
// import ComC from './components/ComC'
// import BlogFather from './components/BlogFather'
// import Big from './components/Big'
// import Detail from './components/Detail'
// import SongList from './components/SongList'
// ========== 懒加载 =========
// 引入懒加载的资源
import Loadable from 'react-loadable';
// 加载时显示的组件
import Loading from './components/Loading';
// 按照懒加载的方式引入组件
const ComA = Loadable({
  // 真正要加载的组件
  loader: () => import('./components/ComA'),
  // 加载过程中显示的组件，一般是文字loading或者gif动态图
  loading: Loading,
});
const ComB = Loadable({
  loader: () => import('./components/ComB'),
  loading: Loading,
});
const ComC = Loadable({
  loader: () => import('./components/ComC'),
  loading: Loading,
});
const BlogFather = Loadable({
  loader: () => import('./components/BlogFather'),
  loading: Loading,
});
const Big = Loadable({
  loader: () => import('./components/Big'),
  loading: Loading,
});
const Detail = Loadable({
  loader: () => import('./components/Detail'),
  loading: Loading,
});
const SongList = Loadable({
  loader: () => import('./components/SongList'),
  loading: Loading,
});

export default class Router extends Component {
  render() {
    return (
      <div>
        <Switch>
          {/* exact 严格匹配 */}
          <Route exact path="/" component={BlogFather} />
          <Route path="/coma" component={ComA} />
          <Route path="/comb" component={ComB} />
          <Route path="/comc" component={ComC} />
          <Route path="/big" component={Big} />
          <Route path="/detail/:goodsid" component={Detail} />
          <Route path="/songist" component={SongList} />
        </Switch>
      </div>
    )
  }
}
